@page "/maps/navigation-lines"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the sea routes between various cities for shipping.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to render lines between two points in map using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html'>MapsNavigationLine</a></code>. You can use <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_DashArray'>DashArray</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Width'>Width</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Color'>Color</a></code> properties to customize the appearance of the navigation lines.</p>
   <p>More information about navigation-line can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/navigation-line'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsTitleSettings Text="Shipping sea route between various cities">
            <MapsTitleTextStyle Size="18px" />
        </MapsTitleSettings>
        <MapsZoomSettings Enable="false" ZoomFactor="13" />
        <MapsAreaSettings Background="#4863A0" />
        <MapsCenterPosition Latitude="25.54244147012483" Longitude="-89.62646484375" />
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' TValue="string">
                <MapsShapeSettings Fill="#789071" />
                <MapsNavigationLines>
                    <MapsNavigationLine Visible="true" Angle="0.01" DashArray="1" Color="#FFFFFF"
                                        Latitude="new double[] { 22.403410892712124, 29.756032197482973 }"
                                        Longitude="new double[] { -97.8717041015625, -95.36270141601562 }" />
                    <MapsNavigationLine Visible="true" Angle="0.01" DashArray="1" Color="#FFFFFF"
                                        Latitude="new double[] { 22.403410892712124, 30.180747605060766 }"
                                        Longitude="new double[] { -97.8717041015625, -85.81283569335938 }" />
                    <MapsNavigationLine Visible="true" Angle="0.01" DashArray="1" Color="#FFFFFF"
                                        Latitude="new double[] { 22.403410892712124, 27.9337540167772 }"
                                        Longitude="new double[] { -97.8717041015625, -82.49908447265625 }" />
                    <MapsNavigationLine Visible="true" Angle="0.01" DashArray="1" Color="#FFFFFF"
                                        Latitude="new double[] { 22.403410892712124, 21.282336521195344 }"
                                        Longitude="new double[] { -97.8717041015625, -89.6649169921875 }" />
                    <MapsNavigationLine Visible="true" Angle="0.01" DashArray="1" Color="#FFFFFF"
                                        Latitude="new double[] { 29.756032197482973, 21.282336521195344 }"
                                        Longitude="new double[] { -95.36270141601562, -89.6649169921875 }" />
                    <MapsNavigationLine Visible="true" Angle="0.01" DashArray="1" Color="#FFFFFF"
                                        Latitude="new double[] { 30.180747605060766, 21.282336521195344 }"
                                        Longitude="new double[] { -85.81283569335938, -89.6649169921875 }" />
                    <MapsNavigationLine Visible="true" Angle="0.01" DashArray="1" Color="#FFFFFF"
                                        Latitude="new double[] { 27.9337540167772, 21.282336521195344 }"
                                        Longitude="new double[] { -82.49908447265625, -89.6649169921875 }" />
                </MapsNavigationLines>
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" Shape="MarkerType.Circle" Fill="#FFFFFF" DataSource="@PenisularMarker" TValue="Country" AnimationDuration="0">
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" />
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PenisularMarkerOne" TValue="Country">
                        <MarkerTemplate>
                            @{
                                var Data = context as Country;
                                <div class="markerTemplate" style="margin-left:-65px;margin-top:10px;">
                                    <p>@Data.Name</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PenisularMarkerTwo" TValue="Country">
                        <MarkerTemplate>
                            @{
                                var Data = context as Country;
                                <div class="markerTemplate" style="margin-top:-20px;">
                                    <p>@Data.Name</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PenisularMarkerThree" TValue="Country">
                        <MarkerTemplate>
                            @{
                                var Data = context as Country;
                                <div class="markerTemplate" style="margin-top:-20px;">
                                    <p>@Data.Name</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PenisularMarkerFour" TValue="Country">
                        <MarkerTemplate>
                            @{
                                var Data = context as Country;
                                <div class="markerTemplate" style="margin-top:-20px;">
                                    <p>@Data.Name</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PenisularMarkerFive" TValue="Country">
                        <MarkerTemplate>
                            @{
                                var Data = context as Country;
                                <div class="markerTemplate" style="margin-top:40px;">
                                    <p>@Data.Name</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="http://www.lineaships.com/en/linea-peninsular/" target="_blank">www.lineaships.com</a>
    </div>
</div>
<style>
    .markerTemplate {
        font-size: 12px;
        color: #FFFFFF;
        text-shadow: 0px 1px 1px black;
        font-weight: 500;
    }
</style>
@code {
    public class Country
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
    };
    public List<Country> PenisularMarker = new List<Country> {
        new Country { Latitude=22.403410892712124, Longitude=-97.8717041015625, Name="ALTAMIRA" },
        new Country { Latitude=29.756032197482973, Longitude=-95.36270141601562, Name="HOUSTON" },
        new Country { Latitude=30.180747605060766, Longitude=-85.81283569335938, Name="PANAMA CITY" },
        new Country { Latitude=27.9337540167772, Longitude=-82.49908447265625, Name="TAMPA" },
        new Country { Latitude=21.282336521195344, Longitude=-89.6649169921875, Name="PROGRESO" }
    };
    public List<Country> PenisularMarkerOne = new List<Country> {
        new Country { Latitude=22.403410892712124, Longitude=-97.8717041015625, Name="ALTAMIRA" }
    };
    public List<Country> PenisularMarkerTwo = new List<Country> {
        new Country { Latitude=29.756032197482973, Longitude=-95.36270141601562, Name="HOUSTON" }
    };
    public List<Country> PenisularMarkerThree = new List<Country> {
       new Country { Latitude=30.180747605060766, Longitude=-85.81283569335938, Name="PANAMA CITY" }
    };
    public List<Country> PenisularMarkerFour = new List<Country> {
        new Country { Latitude=27.9337540167772, Longitude=-82.49908447265625, Name="TAMPA" }
    };
    public List<Country> PenisularMarkerFive = new List<Country> {
        new Country { Latitude=21.282336521195344, Longitude=-89.6649169921875, Name="PROGRESO" }
    };
}